<script setup lang="ts">
import MenuButton from './components/MenuButton.vue'
import Chart from './components/Chart.vue'
import TextPanel from './components/TextPanel.vue'
import {computed, ref} from 'vue'
import NavButton from './components/NavButton.vue'

const menuData = [
  {
    label: '在研质量问题',
    items: ['责任单位', '时间', '原因分类', '型号', '领域', '平台', '分系统', '研制阶段', '外协单位']
  },
  {label: '在轨质量问题', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '组织关注风险', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '监督代表意见', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '软件第三方评测', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '元器件质保问题', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '不合格品审理', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '组织关注风险', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '总装现场单据', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']},
  {label: '评审把关意见', items: ['责任单位', '时间', '原因分类', '型号', '研制阶段', '外协单位']}
]

const activeMenu = ref(0)
const activeItem = ref(0)

// 根据选择的菜单和维度，生成图表标题
const chartTitle = computed(() => {
  const targetLabel = menuData[activeMenu.value]?.label || ''
  const dimensionLabel = menuData[activeMenu.value]?.items?.[activeItem.value] || ''
  if (!targetLabel || !dimensionLabel) return '数据分析'
  return `${targetLabel} - 按${dimensionLabel}分析`
})

// 选择了某个菜单的某个维度
const onChooseItem = (menuIndex: number, itemIndex: number) => {
  activeMenu.value = menuIndex
  activeItem.value = itemIndex
}

// 绑定快捷键,上下左右切换菜单
const onClickPrev = () => {
  const items = menuData[activeMenu.value]?.items || []
  // 第一个维度时，切换上一个菜单
  if (activeItem.value === 0) {
    if (activeMenu.value === 0) return
    activeMenu.value = (activeMenu.value - 1 + menuData.length) % menuData.length
    const newItems = menuData[activeMenu.value]?.items || []
    activeItem.value = newItems.length > 0 ? newItems.length - 1 : 0
  } else if (items.length > 0) {
    activeItem.value = (activeItem.value - 1 + items.length) % items.length
  }
}

const onClickNext = () => {
  const items = menuData[activeMenu.value]?.items || []
  // 最后一个维度时，切换下一个菜单，最后一个菜单时不再切换
  if (activeItem.value === items.length - 1) {
    if (activeMenu.value === menuData.length - 1) return
    activeMenu.value = (activeMenu.value + 1) % menuData.length
    activeItem.value = 0
  } else if (items.length > 0) {
    activeItem.value = (activeItem.value + 1) % items.length
  }
}

window.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    activeMenu.value = (activeMenu.value + 1) % menuData.length
    activeItem.value = 0
  } else if (e.key === 'ArrowUp') {
    activeMenu.value = (activeMenu.value - 1 + menuData.length) % menuData.length
    activeItem.value = 0
  }
})
</script>

<template>
  <div class="wrapper">
    <!--  顶部菜单栏  -->
    <div class="menu-panel">
      <MenuButton
        v-for="(menu, index) in menuData"
        :key="index"
        :label="menu.label"
        :items="menu.items"
        :active="activeMenu === index"
        @choose-item="onChooseItem(index,$event)"
      />
    </div>

    <div class="content-wrapper">
      <!--  标题 + 文本  -->
      <div class="text-wrapper line-border">
        <TextPanel
          :target="menuData[activeMenu]?.label || ''"
          :dimension="menuData[activeMenu]?.items?.[activeItem] || ''"/>
      </div>

      <!--  图表  -->
      <div class="chart-wrapper line-border">
        <Chart :title="chartTitle"/>
      </div>
    </div>

    <!--  左右翻页按钮  -->
    <NavButton @prev="onClickPrev" @next="onClickNext"/>

    <!--  页面底端显示 当前页数/总页数，当前页数为目前所有维度之和，总页数为所有菜单的所有维度之和  -->
    <div class="indicator">
      {{ activeItem + 1 + menuData.slice(0, activeMenu).reduce((sum, menu) => sum + menu.items.length, 0) }}
      /
      {{ menuData.reduce((sum, menu) => sum + menu.items.length, 0) }}
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background: url("./assets/background.png") no-repeat center center;
  background-size: cover; /* 等比例填充整个屏幕 */

  display: flex;
  flex-direction: column;
}

.menu-panel {
  height: 80px;
  padding: 20px;
  display: flex;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.content-wrapper {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px 20px;
}

.line-border {
  border: 2px solid var(--border);
  border-radius: 12px;
  /* 让细线在深色底更清晰 */
  box-shadow: inset 0 0 0 1px rgba(12, 18, 32, 0.5);
}

.text-wrapper {
  width: 100%;
  height: 30%;
  margin-bottom: 20px;
  padding: 16px 20px;
}

.chart-wrapper {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator {
  position: fixed;
  bottom: max(8px, env(safe-area-inset-bottom) + 8px);
  right: 20px;
  padding: 4px 12px;
  font-size: 14px;
  color: #E6EDF7;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-nav-btn);
  backdrop-filter: blur(10px);
}
</style>
